<template>
    <div>

        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						
                        <a :class="['mui-control-item', item.id==0 ? 'mui-active':'']" v-for="(item) in catgoryList" :key="item.id">
							{{item.title}}
						</a>
						
					</div>
				</div>
			</div>
    </div>
</template>


<script>

import mui from '../../lib/mui/js/mui.min.js';



export default {

    created() {
        this.getPhotoCatgoryList();
    },

    mounted() {
        mui('.mui-scroll-wrapper').scroll({
            scrollY: false, //是否竖向滚动
            scrollX: true, //是否横向滚动
	        deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },

    data() {
        return {
            catgoryList : [],
        }
    },
    methods : {
        getPhotoCatgoryList() {
            this.$http.get('http://mint-ui.github.io/docs/#/zh-cn2/swipe').then(result=>{
                if(result.status==200) {
                    this.catgoryList = [
                        {id: 0 , title:'全部'},
                        {id: 1 , title:'关注'},
                        {id: 2 , title:'头条'},
                        {id: 3 , title:'家具生活'},
                        {id: 4 , title:'摄影设计'},
                        {id: 5 , title:'汽车设计'},
                        {id: 6 , title:'健康设计'},
                        {id: 7 , title:'科技'},
                        {id: 8 , title:'健身达人'},

                    ];
                }
            });
        }
    },
}
    
</script>

<style lang="scss" scoped>
* { 
    touch-action: pan-y; 
}
</style>
